<template>
    <div class="store-information">
            <div class="store-info">
                <img src="@/assets/user.jpeg" alt="">
                <div class="number">
                    <div>注册总人数</div>
                    <div>{{userInfo.length}}</div>
                </div>
            </div>
            <div class="store-info">
                <img src="@/assets/money.jpg" alt="">
                <div class="number">
                    <div>{{ `日营收额(${todayCommodityOrders.length}单)` }}</div>
                    <div>{{`￥${todayTotalPrice}`}}</div>
                </div>
            </div>
            <div class="store-info">
                <img src="@/assets/money.jpg" alt="">
                <div class="number">
                    <div>{{ `周营收额(${weekCommodityOrders.length}单)` }}</div>
                    <div>{{`￥${weekTotalPrice}`}}</div>
                </div>
            </div>
            <div class="store-info">
                <img src="@/assets/money.jpg" alt="">
                <div class="number">
                    <div>{{ `月营收额(${monthCommodityOrders.length}单)` }}</div>
                    <div>{{`￥${monthTotalPrice}`}}</div>
                </div>
            </div>
            <div class="store-info">
                <img src="@/assets/money.jpg" alt="">
                <div class="number">
                    <div>{{ `总营收额(${allCommodityOrders.length}单)` }}</div>
                    <div>{{`￥${AllPrice}`}}</div>
                </div>
            </div>
        </div>
</template>

<script setup>
import { onMounted,ref,computed,watch } from 'vue';
import { AllUsers , timeCommodityOrders,AllCommodityOrders} from '@/api/storeRevenue'
// 用户信息
const userInfo = ref([])
// 当天订单信息
const todayCommodityOrders = ref([])
// 本周订单信息
const weekCommodityOrders = ref([])
// 本月订单信息
const monthCommodityOrders = ref([])
// 所有订单信息
const allCommodityOrders = ref([])
// 获取当天开始时间和结束时间
function getTodayStartTimeAndEndTime(time) {
  time = time ? time : new Date();
  return {
    startTime: new Date(time.setHours(0, 0, 0, 0)),
    endTime: new Date(time.setHours(23, 59, 59, 999)),
  };
}
// 获取本周开始时间和结束时间
function getCurrentWeekStartTimeAndEndTime(time) {
  const current = time ? time : new Date();
  // current是本周的第几天
  let nowDayOfWeek = current.getDay();
  if (nowDayOfWeek === 0) nowDayOfWeek = 7;
  const dayNum = 1 * 24 * 60 * 60 * 1000;
  // 获取本周星期一的时间，星期一作为一周的第一天
  const firstDate = new Date(current.valueOf() - (nowDayOfWeek - 1) * dayNum);

  // 获取本周星期天的时间，星期天作为一周的最后一天
  const lastDate = new Date(new Date(firstDate).valueOf() + 6 * dayNum);
  return {
    startTime: new Date(firstDate.setHours(0, 0, 0, 0)),
    endTime: new Date(lastDate.setHours(23, 59, 59, 999)),
  };
}
// 获取本月开始时间和结束时间
function getCurrentMonthStartTimeAndEndTime(time) {
    const date = time ? time : new Date();
    // 本月的开始时间
    const currentMonthstartTime = date.setDate(1);
    //  当前月
    const currentMonth = date.getMonth();
    // 下个月
    const nextMonth = currentMonth + 1;
    // 下个月的第一天
    const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
    const oneDay = 24 * 60 * 60 * 1000;
    return {
    startTime:new Date(new Date(currentMonthstartTime).setHours(0, 0, 0, 0)),
    // 下个月的第一天减去一天就是这个月的最后一天
    endTime: new Date(new Date(nextMonthFirstDay - oneDay).setHours(23, 59, 59, 999))
    }
}
// 当天订单营收总额
const todayTotalPrice = computed(()=>{
    let total = 0
    todayCommodityOrders.value.forEach(item => total += (item.price * item.salesVolumes))
    return (total).toFixed(1)
})
// 本周订单营收总额
const weekTotalPrice = computed(()=>{
    let total = 0
    weekCommodityOrders.value.forEach(item => total += (item.price * item.salesVolumes))
    return (total).toFixed(1)
})
// 本月订单营收总额
const monthTotalPrice = computed(()=>{
    let total = 0
    monthCommodityOrders.value.forEach(item => total += (item.price * item.salesVolumes))
    return (total).toFixed(1)
})
// 总订单营收总额
const AllPrice = computed(()=>{
    let total = 0
    allCommodityOrders.value.forEach(item => total += (item.price * item.salesVolumes))
    return (total).toFixed(1)
})
onMounted(async ()=>{
    // 获取用户信息
    userInfo.value = await AllUsers()
    // 获取当天的开始时间和结束时间
    const {startTime:todayStartTime,endTime:todayEndTime} = getTodayStartTimeAndEndTime()
    // 获取本周的开始时间和结束时间
    const {startTime:weekStartTime,endTime:weekEndTime} = getCurrentWeekStartTimeAndEndTime()
    // 获取本月的开始时间和结束时间
    const {startTime:monthStartTime,endTime:monthEndTime} = getCurrentMonthStartTimeAndEndTime()
    todayCommodityOrders.value = await timeCommodityOrders({startTime:todayStartTime,endTime:todayEndTime})
    weekCommodityOrders.value = await timeCommodityOrders({startTime:weekStartTime,endTime:weekEndTime})
    monthCommodityOrders.value = await timeCommodityOrders({startTime:monthStartTime,endTime:monthEndTime})
    // 获取所有订单信息
    allCommodityOrders.value = await AllCommodityOrders()
})
</script>

<style lang="scss" scoped>
.store-information{
        display: flex;
        // background-color: #F5F5F5;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        .store-info{
            display: flex;
            background-color: #FFF;
            justify-content: space-between;
            width: 20%;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            margin-right: 20px;
            img{
                width: 50px;
                height: 50px;
            }
            .number{
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                & > div {
                    margin-bottom: 10px;
                }
            }
        }
    }
</style>